<template>
  <div class="edit_div" v-html="innerText" :contenteditable="canEdit" @focus="isLocked = true" @blur="isLocked = false" @input="changeText">
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    name: 'editDiv',
    props: {
      value: {
        type: String,
        default: ''
      },
      canEdit: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        innerText: this.value,
        isLocked: false
      }
    },
    watch: {
      value(val) {
        if (!this.isLocked) {
          this.innerText = val;
        }
      }
    },
    methods: {
      changeText() {
        this.$emit('input', this.$el.innerHTML);
      }
    }
  }

</script>


<style lang="less">
  .edit_div {
    font-size: 14px;
    color: #4c4c4c;
    resize: none;
    outline: none;
    display: inline-block;
    width: 100%;
    height: 100%;
  }

</style>
